﻿<%@ Page Title="好友聊天" Language="C#" MasterPageFile="~/usercate/usercate.master" AutoEventWireup="true" CodeBehind="chatroom.aspx.cs" Inherits="chatblog.usercate.chatroom" %>


<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContentPlaceHolder" runat="server">
  <title>选项卡</title>
    <link href="css/contextMenu.css" rel="stylesheet" type="text/css" />
    <script src="js/contextMenu.js" type="text/javascript"></script>
    <script src="js/PopupDiv.js" type="text/javascript"></script>  
    <script src="js/cookies.js" type="text/javascript"></script>  
    <script src="js/chatroom.js" type="text/javascript"></script>
    <link href="css/chatroom.css" rel="stylesheet" type="text/css" />
    <link href="css/popup.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body{   
    font-family: arial;        
    font-size: 12px;
    text-align: center;        
    margin: 0;                          
    overflow :hidden ;
    }
    .nTab{
    float: left;
    margin: 0 auto;
    border-bottom:1px #C7C7CD solid;
    background:#d5d5d5;
    background-position:left;
    background-repeat:repeat-y;   
    margin-bottom:2px;
    width:650px;
    
    }
    .nTab .TabTitle{     
    clear: both;
    height: 26px;                                   
    overflow :hidden ;
    }
    .nTab .TabTitle ul{
    margin:0;
    padding:0;
    }
    .nTab .TabTitle li{ 
    float: left;
    width:90px;
    cursor: pointer;
    padding-top: 0px;      
    padding-right: 0px;
    padding-left: 0px;
    list-style-type: none;                                                       
    text-align :left  ;
    }
    .nTab .TabTitle .active { background:url(img/tagleft.gif) ;border-left:1px  #C7C7CD solid;border-top:1px  #C7C7CD solid;border-bottom:1px #fff solid; }
    .nTab .TabTitle .normal { background:url(img/tagleft.gif) left -25px no-repeat;border-top:1px #C7C7CD solid;border-bottom:1px #C7C7CD solid;}
    .nTab .TabContent{
    width:auto;background:#fff;
    margin: 0px auto;
    padding:5px 0 0 0;
    border-right:1px #C7C7CD solid;border-left:1px #C7C7CD solid;
    }
    .none {display:none;}
    .contenttab{ font-size:small ;}
    #myTab0 td 
    {
        text-align :left ; width :90%;  vertical-align :top  ;padding-bottom:0px; padding-top :0px; height :20px;
    }
#nav ul {
float:left; 
clear:right; 
list-style:none;
padding:0px;
margin:0px;
font-size:smaller ;
}
#nav a {
width:80px;
display:block;
color:#333;
text-decoration:none;      
text-align:left;
}

#nav li {
float:none;
clear:right;
height:10px;
width:80px;
background:url(img/tagleft.gif)  left -25px no-repeat;
border-top:1px #C7C7CD solid;
border-bottom:1px #C7C7CD solid;
 border-right :1px #C7C7CD solid;
 padding-left :3px;
}
#nav li:hover{
height:10px;
background:url(img/tagleft.gif) ;
border-left:1px  #C7C7CD solid;
border-top:1px  #C7C7CD solid;
border-bottom:1px #C7C7CD solid;
} 
#nav img
{
    padding-bottom:0px;
    padding-top :0px;
}


#chatHeaderDiv
{
    width :100%;
    height:40px;
    background-color :#ECECEC;
}

#chatBodyDiv
{
    width :100%;
    height:400px;
    background-color :lightBlue;
    border:solid 1px #ECECEC; 
    padding:0px 0px 0px 0px; 
}
#chatBodyDiv .leftTd
{   margin:0px;
    vertical-align:top;
    padding :5px 0px 5px 5px;
    width:460px;
    height:380px;
}

#chatBodyDiv .middleTd
{

    vertical-align:middle ;
}
#chatBodyDiv .rightTd
{
    padding:5px 5px 5px 0px;
    width:150px ;
    height:370px;
}

#chatBodyDiv .leftTdWholeShow
{  
    margin:0px;
    padding :5px 0px 5px 5px;
    width:98%;
    height :380px;
}

#chatBodyDiv .rightTdHidden
{
    display :none;
    padding :0px 0px 0px 0px;
}


.chatContent
{
    background-color :#fff;
    width :100%;
    height:210px; 
    margin:0px 0px 5px 0px;
    border:solid 1px #699EF9;
}
.chatInput
{
    background-color :#fff;
    width :100%;
    height:135px;
    border:solid 1px #699EF9;
}
.charInputFontSet
{
    background-color :#fff;
    width :100%;
    height:42%;
    border:solid 1px #699EF9;
}
.chatContentFontSet
{
    background-color :#fff;
    width :100%;
    height:48%; 
    margin:0px 0px 5px 0px;
    border:solid 1px #699EF9;
}


.chatContentInfo
{
    width:98%;
    height:210px;
    font-size :small ;
    background-color:#fff;
    padding:3px 3px 3px 3px;
    overflow:auto  ;
    
}
.chatContentBottom
{
    width:100%;
    height:20px;
    font-size :small ;
    background-color:#ECECEC;
    text-align :left ;
    font-size :small ;
    vertical-align :middle ;
    padding-top :4px;
}
.chatInputTool
{
    background-color :#ECECEC;
    width :100%;
    height:23px;
    border-bottom:solid 1px #699EF9;
    text-align :left ;
    vertical-align:middle ;
}
.chatInputTool img
{
    padding:2px 3px 2px 0px;
}
.imgHover
{
   padding:2px 3px 2px 0px;
   border:solid 1px #699EF9;
   color:#699EF9; 
}

#HtmlEdit
{
    height:85%;
    width :100%;
}

.rightDisplayContent
{
    padding:5px 5px 5px 0px;
    width:98% ;
    background-color :#fff ;
    display:block ;
    border:solid 1px #699EF9;
    height:100%   ;
    
}
.chatInfoRecord
{
    margin:5px 0px 0px 0px;     
    padding :2px 2px 2px 2px;
}
.systemchatInfoRecord
{
    margin:5px 0px 0px 0px;
    background-color :#FEFCE7;
    border:solid 1px lightGray;
    padding :2px 2px 2px 2px;
}
#chatContentInfo div
{
    dispaly: block;
    word-break:break-all;        
}

        .hiddenObject     
        {
            display: none;     
        }
       
        body, h2, div, span, li
        {
            font-size: 12px;
        }
        .title01, .title02
        {
            color: #fff;
            font-weight: bold;
        }
        .UserCate
        {
            width: 100%;
            padding: 4px;
            background: #fff;
        }
        h2
        {
            text-align: center;
            margin: 0px;
            padding: 0px;
            line-height: 22px;
        }
        .h2style
        {
            text-align: center;
            margin: 0px;
            padding: 0px;
            line-height: 22px;
        }
        .title01
        {
            width: 100%;
            height: 25px;
            background: #00ccff;
            cursor: pointer;
        }
        .title02
        {
            width: 100%;
            height: 25px;
            background:url('img/tagleft.gif') ;
            cursor: pointer;
            color :black;
        }
        .content
        {
            background: #eee;
            border-bottom: 2px solid #fff;
            overflow: hidden;
            color: #666;
            padding-left: 4px;
            padding-right: 4px;
            line-height:18px;
            text-align :left ;
        }
        .content a:link, .content a:visited
        {
            color: #666666;
            text-decoration: none;
        }
        .content a:hover
        {
            color: #FF6600;
            text-decoration: underline;
        }
        #CateTool
        {
            width: 100%;
            height: 22px;
            background-color: LightGray;
        }
        
        #bmenu ul, #GroupMenu ul
        {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        #bmenu ul ul, #GroupMenu ul ul
        {
            border-top: 0px;
            border-right: 0px;
        }
        #bmenu a, #GroupMenu a
        {
            width: 130px;
            display: block;
            text-decoration: none;
            text-align: left;
            padding: 3px 4px 3px 7px;
        }
        #bmenu a:hover, #GroupMenu a:hover
        {
            margin: 0px;
            padding: 2px 5px 2px 6px;
            background-color: #f1f1f1;
            text-decoration: none;
        }
        #bmenu li, #GroupMenu li
        {
            float: none;
            clear: right;
            height: 22px;
            width: 119px;
            padding-left: 10px;
        }
        #bmenu li ul li, #GroupMenu li ul li
        {
            float: none;
            clear: right;
            height: 22px;
            width: 109px;
            background: #CEE2FF;
            color: Black;
            padding-left: 10px;
           
        }
        #bmenu li ul li:hover, #GroupMenu li ul li:hover
        {
            float: none;
            height: 22px;
            width: 109px;
            background: #316AC5;
            color: White;
        }
        #bmenu li ul, #GroupMenu li ul
        {
            position: absolute;
            margin: -21px 0px 0px 0px;
            padding: 0;
             left :-9999px;
            width: 109px;
            font-weight: normal;
            display: block;
            border: 1px solid #CCCCCC;
            background: #CEE2FF;
        }
        #bmenu li ul a, #GroupMenu li ul a
        {
            width: 109px;
            text-align: left;
            margin: 0px;
        }
        #bmenu li:hover ul, #bmenu li.sfhover ul, #GroupMenu li:hover ul, #GroupMenu li.sfhover ul
        {
            left:129px;
            height: 22px;
        }
        #bmenu li:hover, #bmenu li.sfhover, #GroupMenu li:hover, #GroupMenu li.sfhover
        {
            border: 1px solid #CCC;
            height: 22px;
            background-color: #316AC5;
        }
        .editGroup
        {
            background-color: #99cc00;
            text-align: left;
            vertical-align: middle;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 10px;
            background:url('img/tagleft.gif') ;
        }
         div.sample_popup
        {
            z-index: +1;
        }
        div.menu_form_header
        {
            cursor: move;
        }
        div.sample_popup div.menu_form_header
        {
            border: 1px solid black;
            border-bottom: 0px;
            cursor: default;
            width: 99%;
            height: 20px;
            line-height: 19px;
            vertical-align: middle;
            background: url( '' ) no-repeat;
            text-decoration: none;
            font-family: "Times New Roman" , Serif;
            font-weight: 900;
            font-size: 13px;
            color: #206040;
            background-color:lightBlue;
        }
        div.sample_popup div.menu_form_body
        {
            border: 1px solid black;
            width: 99%;
            height :180px;
            background: url( '' ) no-repeat left bottom;
            background-color:lightBlue;
        }
        div.sample_popup img.menu_form_exit
        {
            float: right;
            margin: 4px 5px 0px 0px;
            cursor: pointer;
        }
        div.sample_popup table
        {
            border-collapse: collapse;
            width: 100%;
        }
        div.sample_popup th
        {
            width: 1%;
            padding: 0px 5px 1px 0px;
            text-align: left;
            font-family: "Times New Roman" , Serif;
            font-weight: 900;
            font-size: 13px;
            color: #004060;
        }
        div.sample_popup td
        {
            width: 99%;
            padding: 0px 0px 1px 0px;
        }
        div.sample_popup form
        {
            margin: 0px;
            padding: 8px 10px 10px 10px;
        }
        div.sample_popup input.field
        {
            border: 1px solid #808080;
            width: 95%;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
        }
        div.sample_popup input.btn
        {
            margin-top: 2px;
            border: 1px solid #808080;
            background-color: #DDFFDD;
            font-family: Verdana, Sans-Serif;
            font-size: 11px;
        }
        a
        {
            color: Blue;
            text-decoration: none;
        }
    </style>

    <script type="text/javascript">
        //浏览器类型
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        if (window.ActiveXObject)
            Sys.ie = ua.match(/msie ([\d.]+)/)[1]
        else if (document.getBoxObjectFor)
            Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
        else if (window.MessageEvent && !document.getBoxObjectFor)
            Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
        else if (window.opera)
            Sys.opera = ua.match(/opera\/([\d.]+)/)[1]
        else if (window.openDatabase)
            Sys.safari = ua.match(/version\/([\d.]+)/)[1];
            
            
        sfHover = function() {
            var sfEls = document.getElementById("bmenu").getElementsByTagName("LI");
            for (var i = 0; i < sfEls.length; i++) {
                if (sfEls[i].id == 'separator')
                    continue;
                sfEls[i].onmouseover = function() {
                    this.className += " sfhover";
                }
                sfEls[i].onmouseout = function() {
                    this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
                }
            }
        }
        

        // 验证是否为邮箱地址
        function verifyAddress(email) {
            var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            flag = pattern.test(email);
            if (flag) {
                return true;
            }
            else {
                return false;
            }
        }

       
    </script>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="BodyContentPlaceHolder" runat="server">
    <div id="maskDiv" style =" position :absolute ;top:0px; left :0px;   visibility :hidden ; background-color :#666;  z-index :1;"></div>
    <div>        
        
    
<%--    <div  style=" width: 100%; height: 50px; background-image: url(../images/mylogo.gif); background-position: left; background-repeat: no-repeat;
            border-bottom-color: Gray; border-bottom-width: 1px; border-bottom-style: solid;"></div>--%>
      <div  style=" width: 100%; height: 30px;  border-bottom-width: 1px;  border-bottom :solid 1px #ECECEC "></div>
      <%--  <input id="Button1" type="button" value="button" onclick ="frameobj.focus();" />--%>
    <table style =" width :100% ; " >
        <tr >
            <td style =" width :100px">
            </td>
            <%--好友分组--%>
            <td style =" width :200px; vertical-align:top;border:solid 1px lightGray; border-right :none;">
                <div style =" width :100%; height :400px;  ">
                <%--<div style =" text-align:left ;height :26px; padding:0px 4px 0px 4px;"><div style =" font-weight :bold ; color:Red ; text-align :left ;height :26px; background-color :lightGray ;">我的好友</div> </div>--%>
                <div id="UserCate" class="UserCate" style="width:97%; height :400px;  ">
                    <div id="DoorP" runat="server" >
                        <h2  class="h2style" id="702743">默认分组</h2>
                        <div class="content"  style=" background-color :#ECECEC ;  overflow :visible ;" >
                            <br /><br /><br /><br/><br/> <br /><br /><br /><br/><br/><br /><br /><br /><br/><br/> 
                            <%--<img  alt="" src ="img/regular_smile.gif" />--%>
                        </div>
                    </div>
                    <div id="CateTool"  style =" display :none; text-align :left ;">
                        <%--<img  alt=""  src ="img/regular_smile.gif" /><img  alt="" src ="img/regular_smile.gif" /><img  alt="" src ="img/regular_smile.gif" /><img  alt="" src ="img/regular_smile.gif" />--%>
                    </div>
                    <hr />
                    
                </div>

                <script type="text/javascript">
                    var doorPId = "ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP"; //"DoorP"; 
                    var currentRenameGroup = null;
                    var currentAddGroup = null;
                    var newGroupid = "add";
                    var onum = 0;
                    var closeState = new Array();
                    var totalH = 435;
                    var ch = 435;
                    var contenh = 27;
                    var userIdSpanListManage = new Array();
                    var userIdTimeListManage = new Array();
                    var groupIdTimeListManage = new Array();
                    function $(id) { if (document.getElementById(id)) { return document.getElementById(id); } else { alert("没有找到!") } }
                    function $tag(id, tagName) { return $(id).getElementsByTagName(tagName); }
                    function showMe(Cid, Oid) {
                        var h = parseInt(Ds[Cid].style.height);
                        var h2 = parseInt(Ds[Oid].style.height);
                        var dH = ch;
                        if (h > 0) {
                            h = h - Math.ceil(h / 3);
                            Ds[Cid].style.height = h + "px";
                        };
                        if (h2 < dH) {
                            h2 = h2 + Math.ceil((dH - h2) / 3);
                            Ds[Oid].style.height = h2 + "px";
                        };
                        
                        if (h <= 0 && h2 >= dH) {
                            clearTimeout(closeState[Cid]); 
                            return false;
                        };

//                        Ds[Oid].style.height = h + "px";
//                        Ds[Cid].style.height = "0px";
                        closeState[Cid] = setTimeout("showMe(" + Cid + "," + Oid + ")"); }

                    var Ds = $tag(doorPId, "div"); //ctl00_ctl00_ContentPlaceHolder1_BodyContentPlaceHolder_DoorP
                    var Ts = $tag(doorPId, "h2");
                    //        if(Ds.length != Ts.length){alert("初始化失败!");}
                    for (var i = 0; i < Ds.length; i++) {
                        userIdSpanListManage.push(Ds.innerText);
                        //userIdTimeListManage.push("");
                        ch = (totalH - (Ds.length) * contenh);  
                        if (i == onum) {
                            Ds[i].style.height = ch + "px";
                            Ts[i].className = "title02";
                        }
                        else {
                            Ds[i].style.height = "0px";
                            Ts[i].className = "title02";
                        }
                        
                        Ts[i].value = i;
                        Ts[i].onclick = function() {
                            if (onum == this.value) { return false; };
                            Ts[onum].className = "title02";
                            Ts[this.value].className = "title02";
                            for (var i = 0; i < closeState.length; i++) { clearTimeout(closeState[i]); }
                            showMe(onum, this.value);
                            onum = this.value;
                        }
                    }

                function InitAgain() {
                    Ds = $tag(doorPId, "div");
                    Ts = $tag(doorPId, "h2");
                    if (onum >= Ts.length)
                        onum = 0;

                    userIdSpanListManage = new Array();
                    for (var i = 0; i < Ds.length; i++) {
                        userIdSpanListManage.push(Ds.innerText);
                        ch = (totalH - (Ds.length) * contenh);
                        if (i == onum) { Ds[i].style.height = ch + "px"; Ts[i].className = "title02"; } else { Ds[i].style.height = "0px"; Ts[i].className = "title02"; }
                        Ts[i].value = i;
                        Ts[i].onclick = function() {
                            if (onum == this.value) { return false; };
                            Ts[onum].className = "title02";
                            Ts[this.value].className = "title02";
                            for (var i = 0; i < closeState.length; i++) { clearTimeout(closeState[i]); }
                            showMe(onum, this.value);
                            onum = this.value;
                        }
                    }
                }
                function RefreshGroupDiv() {
                    var doorPDiv = document.getElementById(doorPId);
                    doorPDiv.innerHTML = chatblog.usercate.chatroom.GetDoorPInnerHtml().value;
                    InitAgain();
                    currentAddGroup = null;
                    currentRenameGroup = null;
                }


                function saveH2(h2Titleid, titleInputid) {
                    var titleInput = document.getElementById(titleInputid);
                    var result = chatblog.usercate.chatroom.AddGroup(titleInput.value);
                    RefreshGroupDiv();
                }
                function renameH2(groupid, oldName, newNameTextBox) {
                    if (newNameTextBox.value.replace(/\s/g, "") == "") {
                        alert('重命名不能为空或空格！')
                        return;
                    }
                    var result = chatblog.usercate.chatroom.UpdateGroup(groupid, oldName, newNameTextBox.value);
                    RefreshGroupDiv();
                }
                //修改好友昵称
                function renameGroupUserName() {
                    var newName = $('NewUserNickNameText').value;
                    if (newName.replace(/\s/g, "") == "") {
                        alert("新昵称不能为空，请重新输入！");
                        return false ;
                    }
                    var userId = $('RenameUserName_UserIdHidden').value;
                    var groupId = $('RenameUserName_GroupIdHidden').value;
                    var result = chatblog.usercate.chatroom.RenameGroupUserName(userId, groupId, newName);
                    if (result.value == true) {
                        RefreshGroupDiv();
                        $('RenameUserName_UserIdHidden').value = "";
                        $('RenameUserName_GroupIdHidden').value = "";
                        $('NewUserNickNameText').value = "";
                        alert("修改成功！");
                        return true;
                    }
                    else {
                        alert("修改失败！");
                        return false;
                    }
                    return false;
                            
                }
                //添加好友组
                function addGroupOperate() {
                    if (currentAddGroup != null) {
                        alert("已经打开一个新建的组，请继续编辑！");
                        return;
                    }

                    newGroupid += "1";
                    var doorPDiv = document.getElementById(doorPId);
                    var h2Ele = document.createElement("H2");

                    h2Ele.id = newGroupid;
                    h2Ele.innerHTML = "<input  id=\"titleInput\" type =\"text\" value=\"\" style =\" width :40%\"/><input id=\"Button2\" type=\"button\" value=\"添加\"  onclick =\"saveH2('" + newGroupid + "','titleInput');\"/><input id=\"Button3\" type=\"button\" value=\"取消\" onclick=\"RefreshGroupDiv();\"/>";
                    doorPDiv.appendChild(h2Ele);
                    h2Ele.className = "editGroup";
                    currentAddGroup = h2Ele;
                }
                //重命名好友组
                function renameGroupOperate(cobj) {
                    if (currentRenameGroup != null) {
                        alert("已经存在正在重命名的组，请结束上一操作后再新的重命名！");
                        return;
                    }
                    if (cobj.childNodes[0].nodeName != "#text") {
                        alert("对不起，您有新消息，请处理完消息后再重命名！");
                        return;
                    }
                    var oldName = cobj.childNodes[0].nodeValue;
                    cobj.innerHTML = "<input  id=\"titleInput\" type =\"text\" value=\"" + oldName + "\" style =\" width :40%\"/><input id=\"Button2\" type=\"button\" value=\"修改\"  onclick =\"renameH2('" + cobj.id + "','" + oldName + "',titleInput)\"/><input id=\"Button3\" type=\"button\" value=\"取消\" onclick=\"RefreshGroupDiv();\"/>";
                    cobj.className = "editGroup";
                    currentRenameGroup = cobj;
                }

                //添加好友
                function addUser() {
                    var groupselect = document.getElementById('GroupListSelect');
                    var usertextbox = document.getElementById('NewUserText');
                    var isemail = verifyAddress(usertextbox.value);
                    if (!isemail) {
                        alert("对不起,您输入好友的Email：" + usertextbox.value + " 格式不正确,请重新输入!");
//                        maskBody(50, 'maskDiv');
                        return false  ;
                    }                    
                    var nicktextBox = document.getElementById('UserNickText');
                    if(nicktextBox .value.replace(/\s/g, "") == ""){
                        alert('对不起，好友昵称不能为空或空格,请重新输入！');
                        return false  ;                    
                    }
                    var selectedIndex = groupselect.selectedIndex;
                    var result = chatblog.usercate.chatroom.AddGroupUser(groupselect[selectedIndex].id, usertextbox.value, nicktextBox.value, "");
                    if (result.value == "") {
                        usertextbox.value = "";
                        nicktextBox.value = "";
                        RefreshGroupDiv();
                        return true;
                    }
                    else {
                        alert(result.value);
                    }
                    return false;

                }
                //修改好友分组
                function changeGroupId(userid, oldGroupid, newGroupid) {
                    var result = chatblog.usercate.chatroom.UpdateUserGroup(userid, oldGroupid, newGroupid);
                    var doorPDiv = document.getElementById(doorPId);
                    doorPDiv.innerHTML = chatblog.usercate.chatroom.GetDoorPInnerHtml().value;
                    InitAgain();
                }
               
                //textBox 回车键 确认
                function textboxEnterKeyDown(thisObj) {
                    buttonId = 'RenameUserNameButton';
                    thisObj = thisObj || window.event;
                    if (thisObj.keyCode == '13') {  //Enter键按下
                        $(buttonId).click();
                        clearEventBubble(thisObj);
                    }
                }
            </script>

                <%--组内用户 右键菜单--%>
                <div id="bmenu" style="position: absolute; display: none; top: 0px; left: 0px; width: 130px;
                    margin: 0px; padding: 2px; border: 1px solid #cccccc; background-color: #CEE2FF;">
                    <ul>
                        <li id="rename">修改昵称</li>
                        <li id="del">删除</li>
                        <li id="edit" >更改分组为
                            <ul id="GroupUl" >
                            </ul>
                        </li>
                        <li class="separator" style="height: 1px; vertical-align: middle;" id="separator">
                        </li>
                        <li id="add">添加好友</li>
                        <li id="prop">查看详情</li>
                    </ul>
                </div>
                <div id="GroupMenu" style="position: absolute; display: none; top: 0px; left: 0px;
                    width: 130px; margin: 0px; padding: 2px; border: 1px solid #cccccc; background-color: #CEE2FF;">
                    <ul>
                        <li id="addGroup">添加组</li>
                        <li id="addUser">添加好友</li>
                        <li class="separator" style="height: 1px; vertical-align: middle;" id="Li3"></li>
                        <li id="deleteGroup">删除组</li>
                        <li id="renameGroup">重命名该组</li>
                    </ul>
                </div>
                <br />
                <%--修改好友昵称--%>
                <div class="sample_popup" id="user_popup" style="display :none;   position :absolute ; height:200px; width :350px;  z-index :2;">
                    <div class="menu_form_header" id="user_popup_drag">
                        <table>
                            <tr>
                                <td>
                                    修改好友昵称：
                                </td>
                                <td>
                                    <img alt="" class="menu_form_exit" id="user_popup_exit" src="img/closes.png" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="menu_form_body">    
                        <div style =" width :100%; padding-top :10px">
                            <table >
                                <tr>
                                    <td  >
                                        <span >好友的新昵称：</span>
                                    </td>
                                    <td>
                                        <input id="NewUserNickNameText" type="text" style="width: 200px"  />
                                    </td>
                                </tr>
                            </table>
                            <input id="RenameUserName_GroupIdHidden" type="hidden" /> 
                            <input id="RenameUserName_UserIdHidden" type="hidden" />                             
                        </div>
                        <div style="text-align: center;  width: 100%; padding-top :10px">
                            <input id="RenameUserNameButton" type="button" value="确定" onclick="if( renameGroupUserName()==true) remaskBody('maskDiv');" />
                            <input id="Button2" type="button" value="取消" onclick="remaskBody('maskDiv');" />
                        </div>
                    </div>
                </div>
                
                <%--添加好友--%>
                <div class="sample_popup" id="popup" style=" position:absolute ; height:200px; width :400px; z-index :2;  display :none; ">
                    <div class="menu_form_header" id="popup_drag">
                        <table>
                            <tr>
                                <td>
                                    添加好友：
                                </td>
                                <td>
                                    <img alt="" class="menu_form_exit" id="popup_exit" src="img/closes.png" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="menu_form_body">    
                        <div style =" width :100%;">
                            <table >
                                <tr>
                                    <td  style =" width :200px; ">
                                        <span style =" text-align :left ">您好友的Email：</span>
                                    </td>
                                    <td>
                                        <input id="NewUserText" type="text" style="width: 200px" />
                                    </td>
                                </tr>                        
                                <tr>
                                    <td >
                                        <span style =" text-align :left ">您好友的昵 称：</span>
                                    </td>
                                    <td>
                                        <input id="UserNickText" type="text" style="width: 200px" />
                                    </td>
                                </tr>
                            </table>                              
                        </div>
                        <div id="GroupListDiv">
                        </div>
                        <div style="text-align: center;  width: 100%">
                            <input id="AddButton" type="button" value="增加" onclick=" if( addUser()==true) remaskBody('maskDiv');" />
                            <input id="CancelButton" type="button" value="取消" onclick="remaskBody('maskDiv');" />
                        </div>
                        <%-- <input id="GroupIdHidden" type="hidden"  />--%>
                    </div>
                </div>
                <%--右键菜单--%>

                <script type="text/javascript">
                    $('NewUserNickNameText').onkeydown = function(o) { textboxEnterKeyDown(o); };
                    
                    // 组名右键菜单
                    var groupmenu = new contextMenu(
                        {
                            menuID: "GroupMenu",
                            targetEle: "title02" //
                        },
                        {
                            bindings: {
                                'addGroup': function(o) {
                                    addGroupOperate();
                                },
                                'addUser': function(o) {
                                    var groupListDiv = document.getElementById('GroupListDiv');
                                    groupListDiv.innerHTML = chatblog.usercate.chatroom.GetGroupListSelectHtml(o.id).value;
                                    popup_show('popup', 'popup_drag', 'popup_exit', null, null, true, 'maskDiv', 50);
                                    
                                },
                                'deleteGroup': function(o) {
                                    var groupUserCount = chatblog.usercate.chatroom.GetGroupUserList(o.id).value;
                                    if (groupUserCount > 0) {
                                        alert("对不起，好友组：" + o.childNodes[0].nodeValue + " 中有好友，请在清空该组中的好友之后再删除该组！");
                                        return;
                                    }
                                    if (confirm("删除组：" + o.childNodes[0].nodeValue + " ?") == true) {
                                        var result = chatblog.usercate.chatroom.DeleteGroup(o.id, o.childNodes[0].nodeValue);
                                        var doorPDiv = document.getElementById(doorPId);
                                        doorPDiv.innerHTML = chatblog.usercate.chatroom.GetDoorPInnerHtml().value;
                                        InitAgain();
                                        alert("已删除");
                                    }
                                },
                                'renameGroup': function(o) {
                                    renameGroupOperate(o);
                                }
                            }
                        }
                    );

                    groupmenu.buildContextMenu();

                    // 组内用户右键菜单
                    var cmenu = new contextMenu(
                    {
                        menuID: "bmenu",
                        targetEle: "contextMenu0"
                    },
	 	                {
	 	                    bindings: {
	 	                        'rename': function(o) {
	 	                            popup_show('user_popup', 'user_popup_drag', 'user_popup_exit', null, null, true, 'maskDiv', 50);
	 	                            $('RenameUserName_GroupIdHidden').value = o.id;
	 	                            $('RenameUserName_UserIdHidden').value = o.getElementsByTagName('input')[0].value;	 	                            
	 	                        },
	 	                        'edit': function(o) {
	 	                        },
	 	                        'del': function(o) {
	 	                            if (confirm("删除 " + o.innerText + " ?") == true) {
	 	                                var uid = o.getElementsByTagName('input')[0].value;
	 	                                var result = chatblog.usercate.chatroom.DeleteUser(uid, o.id);
	 	                                var doorPDiv = document.getElementById(doorPId);
	 	                                doorPDiv.innerHTML = chatblog.usercate.chatroom.GetDoorPInnerHtml().value;
	 	                                InitAgain();
	 	                                alert("已删除");
	 	                            }
	 	                        },
	 	                        'prop': function(o) { alert("查看详细 组ID：" + o.id + "；用户ID：" + o.getElementsByTagName('input')[0].value); },
	 	                        'add': function(o) {
	 	                            var groupListDiv = document.getElementById('GroupListDiv');
	 	                            var result = chatblog.usercate.chatroom.GetGroupListSelectHtml(o.id);
	 	                            groupListDiv.innerHTML = result.value;
	 	                            popup_show('popup', 'popup_drag', 'popup_exit',null,null, true, 'maskDiv',50);
	 	                            //maskBody(50);
	 	                        }
	 	                    }
	 	                }
 	                );

                    cmenu.buildContextMenu();
                      

                    //好友头像闪动
                    function flickerUserId(userid) {
                        Ds = $tag(doorPId, "div");     
                        for (var i = 0; i < Ds.length; i++) { 
                           var hideInput = Ds[i].getElementsByTagName("input")[0];
                           if ((hideInput != null) && (hideInput.value == userid)) {
                               var imgObj = Ds[i].getElementsByTagName("img")[0];
                               var spanObj = Ds[i].getElementsByTagName("span")[0];
                               var imgtimeid = setInterval(function() { imgObj.style.visibility = (imgObj.style.visibility == "visible" || imgObj.style.visibility == "") ? "hidden" : "visible"; }, 500);
                               userIdTimeListManage.push([userid, imgtimeid]);

                               flickerGroupId(spanObj.id);
                               //spanObj.ondblclick = function() { $(userid ) };
                               //var catetool = $("CateTool");                               
                               break; 
                           }
                       }                        
                    }
                    //移除好友头像闪动
                    function removeImgTimeIdByUserId(userid) {
                        for (var i = 0; i < userIdTimeListManage.length; i++) {
                            if (userIdTimeListManage[i][0] == userid) {
                                clearInterval(userIdTimeListManage[i][1]);
                                userIdTimeListManage.splice(i, 1);
                                break;
                            }
                        }

                        Ds = $tag(doorPId, "div");
                        for (var i = 0; i < Ds.length; i++) {
                            var hideInput = Ds[i].getElementsByTagName("input")[0];
                            if ((hideInput != null) && (hideInput.value == userid)) {
                                var imgObj = Ds[i].getElementsByTagName("img")[0];
                                var spanObj = Ds[i].getElementsByTagName("span")[0];
                                imgObj.style.visibility = "visible";
                                removeGroupTimeIdByGroupId(spanObj.id);
                                return;
                            }
                        }
                    }

                    //好友分组头像闪动
                    function flickerGroupId(groupId) {
                        var existFilker = false;
                        for (var j = 0; j < groupIdTimeListManage.length; j++) {
                            if (groupIdTimeListManage[j][0] == groupId) {
                                existFilker = true;
                                return;
                            }
                        }

                        Ts = $tag(doorPId, "h2");
                        var beingToFlikerIndex = -1;
                        for (var i = 0; i < Ts.length; i++) {
                            if (Ts[i].id == groupId) {
                                beingToFlikerIndex = i;
                                break;
                            }
                        }

                        if (beingToFlikerIndex >= 0) {
                            var newImg = document.createElement("img");
                            newImg.id = GetGuid();
                            newImg.src = "img/regular_smile.gif";
                            newImg.title = "您有新的消息";
                            //DoorP .childNodes
                            Ts[beingToFlikerIndex].insertBefore(newImg, Ts[beingToFlikerIndex].childNodes[0]);
                            var newImgTimeId = setInterval(function() { newImg.style.visibility = (newImg.style.visibility == "visible" || newImg.style.visibility == "") ? "hidden" : "visible"; }, 500);
                            groupIdTimeListManage.push([newImg.id, newImgTimeId]);
                        } 
                    }

                    //移除好友分组头像闪动
                    function removeGroupTimeIdByGroupId(groupId) {
                        for (var i = 0; i < groupIdTimeListManage.length; i++) {
                            if (groupIdTimeListManage[i][0] == groupId) {
                                clearInterval(groupIdTimeListManage[i][1]);
                                groupIdTimeListManage.splice(i, 1);
                                break;
                            }
                        }
                        Ts = $tag(doorPId, "h2");
                        var beingToRemoveFlikerIndex = -1;
                        for (var i = 0; i < Ts.length; i++) {
                            if (Ts[i].id == groupId) {
                                beingToRemoveFlikerIndex = i;
                                break;
                            }
                        }            
                        if (beingToRemoveFlikerIndex >= 0) {
                            var imgObjs = Ts[beingToRemoveFlikerIndex].getElementsByTagName("img");
                            if (imgObjs != null && imgObjs .length>0) {
                                Ts[beingToRemoveFlikerIndex].removeChild(imgObjs[0]);
                            }
                        }
                    }
                    

                    function exsitUserFlicker(userid) {
                        for (var i = 0; i < userIdTimeListManage.length; i++) {
                            if (userIdTimeListManage[i][0] == userid) {
                                return true;
                            }
                        }
                        return false;
                    }

                    function contextMenuIsRunOrDisplay() {
                        return   ($('bmenu').style.display == 'block') 
                              || ($('GroupMenu').style.display == 'block')
                              || ($('user_popup').style.display == 'block') 
                              || ($('popup').style.display == 'block');
                    }
                </script>
                
                </div>
            </td>
            
            <%--聊天窗口--%>
            <td  style =" height :100%">
                <div >
                    <!-- 选项卡开始 -->
                    <div class="nTab">  
                    <!-- 标题开始 -->
                    <div class="TabTitle" >
                            <ul id="myTab0"  >
                                <li class="active" style ="    height :100%" title ="默认页，不能关闭" onclick="nTabs(this);" id="2ffa7bd7259343babdfae91f9d22505f">
                                <table  >
                                    <tr>
                                        <td ><div  style =" overflow :hidden   ; width :80px;">聊天室设置</div>
                                        </td>
                                        <td ><img  src ="img/closes.png"  alt =""  style =" display :none  "  onclick ="remove('2ffa7bd7259343babdfae91f9d22505f');"/>
                                        </td>
                                    </tr>
                                </table>
                                </li>
                              </ul>
                            <div id="nav" style =" padding-top :0px;  display:none;  padding-bottom :1px;   vertical-align :middle ; ">     <%--position:relative  ; --%>
                                <table >
                                    <tr>
                                        <td>
                                            <img id="roLeftImg" alt ="" src ="img/left.ico" title ="点击左移"   onmouseover ="this.style.cursor='hand';" onclick ="nTabsIndex(currentTabIndex-1);"/>
                                        </td>
                                        <td> 
                                            <img id="toRightImg" alt ="" src ="img/right.ico" title ="点击右移"  onmouseover ="this.style.cursor='hand';" onclick ="nTabsIndex(currentTabIndex+1);"/>
                                        </td>
                                        <td> 
                                            <img alt ="" src ="img/down1.ico" title ="点击查看所有"  onmouseover ="this.style.cursor='hand';" onclick ="showAllTabPage();"  id="showallImg"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                        </td>
                                        <td>
                                        </td>
                                        <td>
                                            <ul onmouseover ="this.style.display='block';" onmouseout ="this.style.display='none';" style =" display:none ; background-color :lightBlue; z-index :100; position :absolute    ; " id="showAllUl">
                                                
                                            </ul>
                                        </td>
                                    </tr>
                                </table>           
                            </div>
                    </div>    
                    
                    
                    <!-- 内容开始 -->
                    <div class="TabContent" id="TabContent" >
                      <div id="myTab0_Content2ffa7bd7259343babdfae91f9d22505f" class ="contenttab" style =" font-size :large ; font-weight :bold ; vertical-align :middle ; height :443px; background-color :lightBlue ">
                        <span>欢迎进入 老友故事 聊天室</span>
                      </div>
                      <div id="myTab1_Content2ffa7bd7259343babdfae91f9d22505f"  class ="contenttab" style =" display :none;"> 
                           <%--聊天室工具栏头开始--%>
                           <div id="chatHeaderDiv">
                                afdasdfas
                           </div>
                           <%--聊天室工具栏头结束--%>
                           
                           <%--聊天室主体开始--%>
                           <div id="chatBodyDiv">
                                <table style =" width:100%; height:96%; vertical-align :middle ; padding :3px 3px 3px 3px;">
                                    <tr>
                                        <td  class ="leftTd " id="chatBodyLeftTd">
                                            <div id="chatContent" class ="chatContent" style ="width :460px;" >
                                                <div id="chatContentInfo" class ="chatContentInfo" style =" overflow :auto      ; text-align :left ;  ">
                                                    <%--<div style =" overflow :hidden ;" id="chatContentInfo0">--%>
                                                        <%--<div  class ="chatInfoRecord">
                                                            <span style =" color:blue; font-weight :bold ;">a</span> <span style ="color:Gray">(19:00:00)</span> <br />
                                                            <span style =" padding-left :20px; color :#D27440"></span> 欢迎a进来
                                                        </div>  
                                                        <div class ="systemchatInfoRecord"> 
                                                            <span style =" color:#9D3C11; font-weight :bold ;">系统消息</span> <span style ="color:Gray">(19:00:00)</span> <br />
                                                            <span style =" padding-left :20px; color :#D27440">欢迎a进来</span>
                                                        </div> 
                                                        <div  class ="chatInfoRecord">
                                                            <span style =" color:#308712; font-weight :bold ;">我</span> <span style ="color:Gray">(19:00:00)</span> <br />
                                                            <span style =" padding-left :20px; color :#D27440"></span> asdf
                                                        </div>--%>
                                                    <%--</div>
                                                    <div>
                                                        <a href="#1" id="2ffa7bd7259343babdfae91f9d2250" name="1"></a>
                                                    </div>  --%>                                  
                                                </div>
                                                <div class ="chatContentBottom" id="chatContentBottom">
                                                </div>
                                            </div>
                                            <div id="chatInput" class ="chatInput" style =" background-color :#ECECEC;width :460px;">                                               
                                                <div id="fontSetDiv11" style =" display :none; height :29px;  background-color :lightBlue;  width :100%">
                                                     <table width ="100%">
                                                        <tr>
                                                            <td style =" width:90%; text-align:left ;" id="fontsettd">
                                                                <select id="fontFamilySelect" style ="  width :130px;" onchange ="fontSizeSelectChange(this,'fontname');">
                                                                    <option selected ="selected" value="宋体" >宋体</option>
                                                                    <option value ="微软雅黑" >微软雅黑</option>
                                                                    <option value ="黑体" >黑体</option>
                                                                    <option value ="新宋体" >新宋体</option> 
                                                                    <option value ="隶书" >隶书</option>
                                                                    <option value ="幼圆" >幼圆</option>
                                                                </select> &nbsp;
                                                                <select id="fontSizeSelect" style =" width :50px;" onchange ="fontSizeSelectChange(this,'fontsize');" >
                                                                    <option value ="1"  >1</option>
                                                                    <option value ="2" >2</option>
                                                                    <option value ="3" >3</option>
                                                                    <option selected ="selected" value ="4" >4</option> 
                                                                    <option value ="5" >5</option>
                                                                    <option value ="6" >6</option> 
                                                                    <option value ="7" >7</option>
                                                                </select>
                                                                <img alt ="" src ="img/font/bold.ico"   onmouseover ="this.className='fontimgover'; " onmouseout ="if(boldSelected==false)this.className='fontimg'; " title ="粗体"  class ="fontimg" onclick ="execFontCommand(this,'bold','');boldSelected=!boldSelected;this.className=boldSelected?'fontimgover':'fontimg';"/>
                                                                <img alt ="" src ="img/font/Italic.ico" onmouseover ="this.className='fontimgover'; " onmouseout ="if(italicSelected==false)this.className='fontimg'; " title ="斜体" class ="fontimg" onclick ="execFontCommand(this,'italic','');italicSelected=!italicSelected;this.className=italicSelected?'fontimgover':'fontimg';"/>
                                                                <img alt ="" src ="img/font/underline.ico"  onmouseover ="this.className='fontimgover'; " onmouseout ="if(underlineSelected==false)this.className='fontimg'; " title ="下划线" class ="fontimg" onclick ="execFontCommand(this,'underline','');underlineSelected=!underlineSelected;this.className=underlineSelected?'fontimgover':'fontimg';"/>
                                                                <img alt ="" src ="img/font/color.ico" onmouseover ="this.className='fontimgover'; " onmouseout ="if(colorSelected==false)this.className='fontimg'; "  title ="字体颜色" class ="fontimg" onclick ="fontForeColorShow(this);colorSelected=!colorSelected;"/>
                                                                
                                                            </td>
                                                            <td style =" width:10%; text-align :right ;  ">
                                                                <img  alt ="" src ="img/closes.png"  onclick ="showFontSet();"/>
                                                            </td>
                                                        </tr>
                                                     </table>
                                                </div> 
                                                <div  class ="chatInputTool" id="chatInputTool" style =" height :23px"> 
                                                    &nbsp;                                                                                                       
                                                    <img   alt ="" title ="设置字体" src ="img/font.bmp" onmouseover ="this.className='imgHover';"  onmouseout ="this.className='';" onclick ="showFontSet();"/>
                                                    <img   alt ="" title ="设置表情" src ="img/regular_smile.gif" onmouseover ="this.className='imgHover';" onmouseout ="this.className='';" onclick ="showSmileSelectDiv(this);"/>
                                                </div>
                                                <%--编辑器--%>
                                                <div style =" height :130px">
                                                 <iframe  id="HtmlEdit" frameborder ="0"   marginwidth="1px" marginheight="1px">
                                                 </iframe>
                                                 <script  type ="text/javascript" >
                                                     var boldSelected = false;
                                                     var italicSelected = false;
                                                     var underlineSelected = false;
                                                     var colorSelected = false;
                                                     
                                                     //var sendMsgHotKey = "CtrlEnter";
                                                     frameobj = frames[0];
                                                     bodyHtml = "<head>\n<style type=\"text/css\"></style>\n</head>\n<body  bgcolor=\"#FFFFFF\" >"
                                                     //if (isIE())
                                                     //    bodyHtml += "<div></div>";  //在keydown 中设置了回车键 插入 /n
                                                     bodyHtml += "</body>";
                                                     frameobj.document.open();
                                                     frameobj.document.write(bodyHtml);
                                                     frameobj.document.close();
                                                     frameobj.document.designMode = "On";
                                                     frameobj.document.onmousedown = function(o) {
                                                        hideAllPopUp(o,true ); //隐藏所有弹出窗体和右键菜单
                                                    }
                                                    function hideAllPopUp(thisObj,isFrame) {
                                                        thisObj = thisObj || (isFrame? frameobj.window.event:window .event);
                                                        var srcEle = ele(thisObj);
                                                        //if(srcEle .id!='')
                                                        $('sendMsgHotKeyUl').style.display = 'none';
                                                        if (srcEle.id != 'addUser' && srcEle.id != 'add')
                                                            $('popup').style.display = 'none';
                                                        if (srcEle.id != 'rename')
                                                            $('user_popup').style.display = 'none';
                                                        $('GroupMenu').style.display = 'none';
                                                        $('bmenu').style.display = 'none';  
                                                        if ($(smiledivid)!=null)
                                                            $(smiledivid).style.display = 'none';          
                                                    }
                                                    //处理发送消息快捷键
                                                    frameobj.document.onkeydown = function(thisObj) {
                                                        sendMsgHotKey = getSendMsgHotKeyCookie();
                                                        thisObj = thisObj || frameobj.window.event;
                                                        if ($('sendMessageButton').disabled == false) {
                                                            //Enter:13
                                                            if (sendMsgHotKey == "Enter" && thisObj.ctrlKey != true) {
                                                                if (thisObj.keyCode == "13") {
                                                                    $('sendMessageButton').click();
                                                                    //clearEventBubble(thisObj);
                                                                    frameobj.focus();
                                                                    return false;
                                                                }
                                                            }
                                                            else {                          //CtrlEnter
                                                                if (thisObj.keyCode == "13" && thisObj.ctrlKey == true) {
                                                                    $('sendMessageButton').click();
                                                                    //clearEventBubble(thisObj);
                                                                    frameobj.focus();
                                                                    return false;
                                                                }
                                                            }

                                                        }
                                                        //处理回车键，加上<br/>
                                                        if (thisObj.keyCode == '13') {
                                                            //在光标所在处创建一个区域.   
                                                            var range = frameobj.document.selection.createRange();
                                                            //将区域的内容设置成为换行符.
                                                            range.text = "\n";
                                                            //将区域的起始点向右移动一个字符的长度.   
                                                            range.moveStart("character", 1);
                                                            //将光标移动到区域的结尾.(若为false则是移动到起始位置).   
                                                            range.collapse(true);
                                                            //由于上面的一系列操作,使得区域的位置处在了\n之后,所以再次选择时,光标就到了新一行的结尾.完成换行.   
                                                            range.select();
                                                            //使事件失效   
                                                            return false;
                                                        }
                                                        return true;
                                                    }
                                                     
                                                     //处理发送按钮状态
                                                    frameobj.document.onkeyup = function(thisObj) {
                                                        var htmlStr = getEditHtml();
                                                        var sendMsgButton = $('sendMessageButton');
                                                        sendMsgButton.disabled = (htmlStr == "") ? true : false;
                                                        sendMsgButton.title = (htmlStr == "") ? "不能发送空字符串或者空格字符串！" : "点击发送消息！";

                                                    }
                                                    
                                                    function fontSizeSelectChange(thisObj,cmdid) {
                                                        frameobj.focus();
                                                        var value = thisObj[thisObj.selectedIndex].value;
                                                        frameobj.document.execCommand(cmdid, 'true', value);
                                                        frameobj.focus();
                                                    }
                                                    function execFontCommand(thisObj, cmdid,value) {                   //prop:  color
                                                        if (thisObj.className == "fontimg") {
                                                            frameobj.focus();
                                                            frameobj.document.execCommand(cmdid, '',value );
                                                            thisObj.className = "fontimgSelected";
                                                        }
                                                        else {
                                                            frameobj.focus();
                                                            frameobj.document.execCommand(cmdid, 'false',value );
                                                            thisObj.className = "fontimg";
                                                        }
                                                    }
                                                    var foreColorDivId = "myForeColor";
                                                    var smiledivid = "smileDivId";
                                                    intocolor(foreColorDivId, $('fontsettd'), 'foreColorTdClick');
                                                     function fontForeColorShow(thisObj) {
                                                         var foreColorDiv = $('myForeColor');
                                                         if (foreColorDiv.style.display == "none") {
                                                             foreColorDiv.style.display = "block" ;
                                                             foreColorDiv.style.top = (getTop(thisObj) - parseInt(foreColorDiv.style.height)).toString() + "px";
                                                             foreColorDiv.style.left = (getLeft(thisObj)).toString() + "px";
                                                             foreColorDiv.style.position = "absolute";
                                                         }
                                                         else {
                                                             foreColorDiv.style.display = "none"
                                                         } 
                                                     }
                                                     function foreColorTdClick(thisObj) {
                                                         var clr = thisObj._background;
                                                         clr = clr.toUpperCase(); //将颜色值大写
                                                         hideforeColorDiv();
                                                         frameobj.focus(); 
                                                         frameobj.document.execCommand("ForeColor", "false", clr);
                                                     }
                                                     function hideforeColorDiv() {
                                                         $(foreColorDivId).style.display = "none";
                                                     }
                                                     function hideFontSet() {
                                                         var chatinput = document.getElementById('chatInput');
                                                         var chatcontent = document.getElementById('chatContent');
                                                         var fontsetdiv = document.getElementById('fontSetDiv11');
                                                         var chatcontentinfo = document.getElementById('chatContentInfo');

                                                         chatcontent.style.height = "210px";
                                                         chatcontentinfo.style.height = "183px";
                                                         chatinput.style.height = "135px";
                                                         fontsetdiv.style.height = "0px";
                                                     }

                                                     //显示设置字体，颜色工具栏
                                                     function showFontSet() {
                                                         var chatinput = document.getElementById('chatInput');
                                                         var chatcontent = document.getElementById('chatContent');
                                                         var fontsetdiv = document.getElementById('fontSetDiv11');
                                                         var chatcontentinfo = document.getElementById('chatContentInfo');
                                                         var olddisplay = fontsetdiv.style.display;
                                                         var oldlheight = fontsetdiv.style.height;
                                                         fontsetdiv.style.display = (olddisplay == "none") ? "block" : "none";

                                                         if (olddisplay == "none") {
                                                             chatcontent.style.height = "180px";
                                                             chatcontentinfo.style.height = "153px";
                                                             chatinput.style.height = "165px";
                                                         }
                                                         else {
                                                             chatcontent.style.height = "210px";
                                                             chatcontentinfo.style.height = "183px";
                                                             chatinput.style.height = "135px";
                                                         }
                                                         if ($(smiledivid) != null)
                                                             $(smiledivid).style.display = 'none';
                                                     }

                                                     initSmile(smiledivid, $('chatInputTool'), "smileImgSelected");
                                                     function showSmileSelectDiv(thisObj) {
                                                         var smilediv = $(smiledivid);
                                                         if (smilediv.style.display == "none") {
                                                             smilediv.style.display = "block";
                                                             smilediv.style.top = (getTop(thisObj) - parseInt(smilediv.style.height)).toString() + "px";
                                                             smilediv.style.left = (getLeft(thisObj)).toString() + "px";
                                                             smilediv.style.position = "absolute";
                                                         }
                                                         else {
                                                             smilediv.style.display = "none"
                                                         }
                                                     }
                                                     function smileImgSelected(thisObj) {
                                                         frameobj.focus();
                                                         frameobj.document.execCommand("InsertImage", "", thisObj.src);
                                                         $('sendMessageButton').disabled = false;
                                                         $(smiledivid).style.display = "none";
                                                     }
                                                    function getSelection() {
                                                        var myArea = document.getElementById("s");
                                                        var selection;
                                                        if (!isIE()) {
                                                            if (myArea.selectionStart != undefined) {
                                                                selection = myArea.value.substr(myArea.selectionStart, myArea.selectionEnd - myArea.selectionStart);
                                                            }
                                                        } else {
                                                            if (window.getSelection) {
                                                                selection = window.getSelection();
                                                            } else if (document.getSelection) {
                                                                selection = document.getSelection();
                                                            } else if (document.selection) {
                                                                selection = document.selection.createRange().text;
                                                            }
                                                        }
                                                        alert(selection)
                                                    }

                                                    function getFrameSelection() {
                                                        var myArea = frameobj.document.body;
                                                        var selection="";
                                                        if (!isIE()) {
                                                            if (myArea.selectionStart != undefined) {
                                                                selection = myArea.value.substr(myArea.selectionStart, myArea.selectionEnd - myArea.selectionStart);
                                                            }
                                                        } else {
                                                            if (frameobj.window.getSelection) {
                                                                selection = frameobj.window.getSelection();
                                                            } else if (frameobj.document.getSelection) {
                                                                selection = frameobj.document.getSelection();
                                                            } else if (frameobj.document.selection) {
                                                                selection = frameobj.document.selection.createRange().text;
                                                            }
                                                        }
                                                        if (selection != "")
                                                            alert(selection)
                                                    }                          

                                                 </script>
                                                 </div>
                                            </div>
                                            <div style ="  vertical-align :top; text-align :right ; width :100%  ">
                                                <table>
                                                    <tr>
                                                        <td style =" width:91%">
                                                        </td>  
                                                        <td>
                                                            <input id="sendMessageButton" disabled =true   title ="不能发送空字符串或者空格字符串！" type="button"  value="发送" onclick ="sendMessage() ;"   />
                                                        </td>
                                                        <td>
                                                            <input id="hotKeysButton" title ="点击修改'发送'按钮的快捷键" type="button" onclick ="return showHotKeySelect(this);"  style ="  width :15px; height :20px; line-height :20px; background-color :lightBlue; background-attachment :scroll  ; background-image :url(img/hotkey.gif); background-repeat :no-repeat ;"/>
                                                            <ul id="sendMsgHotKeyUl" style =" position:absolute   ; display :none; background-color:#ECECEC; border:solid 1px Gray; text-align :left ">
                                                                <li style ="background:url(img/tagleft.gif)  left -25px no-repeat;" onclick ="hotKeyLiSelected(this);" onmouseover ="this.style.background='url(img/tagleft.gif)  no-repeat';" onmouseout ="this.style.background='url(img/tagleft.gif)  left -25px no-repeat';">                                                         
                                                                    <table>
                                                                        <tr>
                                                                            <td style =" width :20px">
                                                                                <img  alt="" src ="img/selectHotKey.ico" />
                                                                            </td>
                                                                            <td>
                                                                                <span>按 Ctrl+Enter 发送</span>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </li>
                                                                <li style ="background:url(img/tagleft.gif)  left -25px no-repeat;" onclick ="hotKeyLiSelected(this);" onmouseover ="this.style.background='url(img/tagleft.gif)  no-repeat';" onmouseout ="this.style.background='url(img/tagleft.gif)  left -25px no-repeat';">
                                                                    <table>
                                                                        <tr>
                                                                            <td style =" width :20px">
                                                                            </td>
                                                                            <td>
                                                                                <span>按 Enter 发送</span>
                                                                            </td>
                                                                        </tr>
                                                                    </table>                                                                    
                                                                </li>
                                                            </ul>
                                                            <script type="text/javascript" >
                                                                var sendMsgHotKey = "";  //或者 Enter  这个属性用来记录当禁用Cookie的时候记录发送消息的快捷键； 每次用的时候最好调用sendMsgHotKey = getSendMsgHotKeyCookie();                                                                
                                                                var sendMsgHotKeyCookieName = "sendMsgHotKey";
                                                                var sendMsgHotKeyCookieDomain = "HotKey";
                                                                
                                                                //辅助方法，设置发送消息快捷键
                                                                function setHotKey() {
                                                                    sendMsgHotKey = getSendMsgHotKeyCookie();
                                                                    var hotkeyliList = $tag('sendMsgHotKeyUl', 'li');
                                                                    if (sendMsgHotKey == "CtrlEnter") {
                                                                        hotkeyliList[0].getElementsByTagName('td')[0].innerHTML = '<img  alt="" src ="img/selectHotKey.ico" />';
                                                                        hotkeyliList[1].getElementsByTagName('td')[0].innerHTML = '';
                                                                    }
                                                                    else if (sendMsgHotKey == "Enter") {
                                                                        hotkeyliList[1].getElementsByTagName('td')[0].innerHTML = '<img  alt="" src ="img/selectHotKey.ico" />';
                                                                        hotkeyliList[0].getElementsByTagName('td')[0].innerHTML = '';
                                                                    }
                                                                }
                                                                //选择发送消息快捷键(li)的点击事件方法
                                                                function hotKeyLiSelected(thisObj) {                                                                     
                                                                    try {                                                                             
                                                                    thisObj = thisObj || window.event;
                                                                    clearEventBubble(thisObj);
                                                                    var hotkeyliList = $tag('sendMsgHotKeyUl', 'li');
                                                                    sendMsgHotKey = (hotkeyliList[0] == thisObj) ? "CtrlEnter" : "Enter";
                                                                    setSendMsgHotKeyCookie(sendMsgHotKey);
                                                                    setHotKey();
                                                                    document.getElementById('sendMsgHotKeyUl').style.display = "none";
                                                                    }
                                                                    catch(e){
                                                                    }
                                                                    finally {
                                                                        clearEventBubble(thisObj);                                                                        
                                                                        return false  ;
                                                                    }
                                                                                                                
                                                                    //document .cookie
                                                                }
                                                                //显示 选择快捷键的 div
                                                                function showHotKeySelect(thisObj) {
                                                                    try {
                                                                        thisObj = thisObj || window.event; //alert(window.event.x + " " + window.event.clientX + " " + window.event.pageX);  //alert(getX(thisObj) + " " + getY(thisObj ));
                                                                        clearEventBubble(thisObj); 
                                                                        $('sendMsgHotKeyUl').style.display = 'block';
                                                                    } catch (e)
                                                                    { }
                                                                    finally {
                                                                        clearEventBubble(thisObj); 
                                                                        return false;
                                                                    }
                                                                }
                                                                //隐藏 选择快捷键的 div
                                                                function hideHotKeySelect() {
                                                                    $('sendMsgHotKeyUl').style.display = 'none';
                                                                }
                                                                //设置 发送按钮快捷键 的cookie
                                                                function setSendMsgHotKeyCookie(hotKeyMode) {        //"CtrlEnter" 或者 "Enter"
                                                                    //if (isEnableCookie()) 
                                                                    {
                                                                        setCookie(sendMsgHotKeyCookieName, hotKeyMode, sendMsgHotKeyCookieDomain);
                                                                    } 
                                                                    sendMsgHotKey = hotKeyMode;
                                                                }
                                                                //获取 发送按钮快捷键 的cookie
                                                                function getSendMsgHotKeyCookie() {
                                                                    //if (isEnableCookie()) 
                                                                    {
                                                                        sendMsgHotKey = getcookie(sendMsgHotKeyCookieName);
                                                                        if (sendMsgHotKey == "")
                                                                            sendMsgHotKey = "CtrlEnter";
                                                                    } 
                                                                    return sendMsgHotKey;
                                                                }
                                                                sendMsgHotKey = getSendMsgHotKeyCookie();
                                                                setHotKey();
                                                                if (Sys.firefox) {
                                                                    $('sendMessageButton').disabled = false;
                                                                    $('hotKeysButton').disabled = true;
                                                                    $('hotKeysButton').style.display = "none";
                                                                }
                                                            </script>
                                                        </td>
                                                    </tr>
                                                </table>
                                           </div>
                                        </td>
                                        <td class ="middleTd ">
                                            <div style =" width :10px; height:30px; border :solid 1px #ECECEC;  vertical-align:middle ;">
                                                <img  alt ="" style =" border:none; width:100%;" onmouseover ="this.style.cursor='hand';" title ="点击隐藏" onclick ="showChatRightBody(this);"  src ="img/arrow_right.gif" />
                                            </div>
                                        </td>                                                                 
                                        <td class ="rightTd " id="chatBodyRightTd">
                                            <div class ="rightDisplayContent">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                           </div>
                           <%--聊天室主体结束--%>
                      </div>
                 
                    </div>
                  </div>
                    <!-- 选项卡结束 -->
                    </div>
            </td>
        </tr>
    </table>

    
        <%--好友上线下线系统通知模板--%>
        <%--<div class="sample_popup" id="SystemInfo_UserStatus_popup" style="display :none;   height:200px; width :350px;   z-index :9;">
            <div class="menu_form_header" id="SystemInfo_UserStatus_drag">
                <table>
                    <tr>
                        <td>
                            系统消息：
                        </td>
                        <td>
                            <img alt="" class="menu_form_exit" id="SystemInfo_UserStatus_exit" src="img/closes.png" />
                        </td>
                    </tr>
                </table>
            </div>
            <div class="menu_form_body" id="SystemInfo_UserStatus_body">    
                 
            </div>
        </div>--%>
    </div>
    
    
    <script type="text/javascript">
        
        function LoginClick() {
            var userid = document.getElementById("UserIdText").value;
            var pass = document.getElementById("PassText").value;
            currentUser = chatblog.usercate.chatroom.ValidateUser(userid, pass).value;
            //alert(currentUser);
            if (currentUser == "" || currentUser==null)
                alert("对不起，密码和用户名错误，请重新登录！");
            else {
                var loginspanad = document.getElementById("loginSpan");
                loginspanad.style.display = "inline";
                loginspanad.innerHTML = "欢迎您，" + currentUser + "!";
                RefreshGroupDiv();
            }
        }
        
        
        var chatcontentinfo = document.getElementById("chatContentInfo");
        
        if (Sys.firefox) {
            chatcontentinfo.style.height = "183px";   //alert(chatcontentinfo);
        }
        else if (Sys.chrome) {
            chatcontentinfo.style.height = "183px";
            //alert(chatcontentinfo);
        }
        else if (Sys.ie) {
            chatcontentinfo.style.height = "183px";
        }
       
        //alert(chatcontentinfo.style.height);
        var maxTitleLength = 12;
        var currentUser = chatblog.usercate.chatroom.GetCurrentUserID().value;
        var _MsgDivHeader = "<div id=\"MsgDiv\" style =\"  overflow :hidden ; width:100%\">";
        var _MsgDivFooter = "</div>";
        var _MsgEndHTML = "<div id=\"2ffa7bd7259343babdfae91f9d2250\" style =\" overflow :hidden ; height :0px;\"></div>"; 
        var tabWidth = 90;
        var maxDisplayCount = 6;
        var defaultUserId = "公共聊天室";  //所有在线用户都能看到的
        var defaulttabObjId = "2ffa7bd7259343babdfae91f9d22505f";
        var currentTabCount = 1;
        var currentTabIndex = 0;
        var startTabIndex = 0;
        var displayTabCount = 1;
        var tabListManage;
        var contentListManage;  //每个聊天对象的聊天记录列表
        var contentCssName = "contenttab";
        var tabObj = document.getElementById("myTab0");
        var contentObj = document.getElementById("TabContent");
        var chatheaderdiv = document.getElementById('chatHeaderDiv');
        var navDiv = document.getElementById("nav");
        var chatSetdDiv = document.getElementById ('myTab0_Content2ffa7bd7259343babdfae91f9d22505f');
        var chatDiv = document.getElementById('myTab1_Content2ffa7bd7259343babdfae91f9d22505f');
        
        function getTitleStr(title) {
            if (title.length <= maxTitleLength) {
                return title;
            }
            return title.substr(0, maxTitleLength -3) + "...";
        }
        
        //Tab标题页
        function initTabControl() {
            tabListManage = new Array();           
            var tabList = tabObj.getElementsByTagName("li");
            for (var i = 0; i < tabList.length; i++)
                tabListManage.push(tabList[i].id);
            currentTabCount = tabListManage.length;

            //初始化公共聊天室
            contentListManage = new Array(); 
            initChatForm(defaultUserId);
            contentListManage .push (getContentInfoHtml()); //有问题
            
            if (tabListManage.length > maxDisplayCount) {
                navDiv.style.display = 'block';
            }
            else {
                navDiv.style.display = 'none';
            }
        }
        initTabControl();
      
        function nTabsIndex(index) {
            if ((index >= 0) && (index < tabListManage.length))
                nTabsId(tabListManage[index]);
        }

        function nTabsId(thisObjId) {
            var thisObj = document.getElementById(thisObjId);
            nTabs(thisObj);
        }
        function nTabs(thisObj) {             
            if (thisObj.className == "active") return;
            currentTabCount = tabListManage.length;
            var oldTabIndex = currentTabIndex;
            var newTabIndex = oldTabIndex;
            for (i = 0; i < tabListManage.length; i++) {
                if ((tabListManage[i] == thisObj.id) ) {
                    newTabIndex = i;
                    break;
                }
            }

            var endTabIndex = startTabIndex + maxDisplayCount - 1
            var newStartIndex = 0;
            if (newTabIndex > endTabIndex) {
                newStartIndex = newTabIndex - maxDisplayCount + 1;
            }
            else if (newTabIndex <= endTabIndex && newTabIndex >= startTabIndex) {
                newStartIndex = startTabIndex;
            }
            else {
                newStartIndex = newTabIndex;
            }
            var newEndIndex = newStartIndex + maxDisplayCount - 1;

            for (i = 0; i < tabListManage.length; i++) {
                if ((tabListManage[i] == thisObj.id) ) {
                    currentTabIndex = i;
                    thisObj.className = "active";
                    thisObj.style.display = "block";
                    thisObj.getElementsByTagName('img')[0].style.display = ((thisObj.id == defaulttabObjId) ? "none" : "inline");

                } else {
                    document.getElementById(tabListManage[i]).className = "normal";
                    document.getElementById(tabListManage[i]).getElementsByTagName('img')[0].style.display = "none";
                    if (i >= newStartIndex && i <= newEndIndex) {
                        document.getElementById(tabListManage[i]).style.display = "block";
                    }
                    else {
                        document.getElementById(tabListManage[i]).style.display = "none";
                    }         
                }
            }

            if (thisObj.id == defaulttabObjId) {
                chatSetdDiv.style.display = "block";
                chatDiv.style.display = "none";
                thisObj.className = "active";
                return;
            }
            else {
                chatSetdDiv.style.display = "none";
                chatDiv.style.display = "block";
            }
            
            //重新初始化聊天记录
            initChatForm(thisObj.id);
            startTabIndex = newStartIndex;
            //contentListManage[i] = getContentInfoHtml();

            if (tabListManage.length > maxDisplayCount) {
                navDiv.style.display = 'block';
            }
            else {
                navDiv.style.display = 'none';
            }

            removeImgTimeIdByUserId(thisObj.id);  //移除闪烁，并且显示图像
            
        }
        // id:用户名   title:昵称
        function addTab(id, title) {
            currentUser = chatblog.usercate.chatroom.GetCurrentUserID().value;
            //alert(currentUser);
            if (currentUser == "" || currentUser == null) {
                alert("对不起，你未登录！");
                return;
            }
            var exitsid = false;
            for (var i = 0; i < tabListManage.length; i++) {
                if (tabListManage[i] == id) {
                    exitsid = true;
                    break;
                }
            }
            if (exitsid == true) {
                nTabsId(id);
                return;
            }
            
            var newGuidId = id;  //GetGuid();
            var newLiHTML = "<li class=\"normal\" onclick=\"nTabs(this);\" id=\"" + newGuidId + "\">" +
                          "<table >" +
                          "     <tr>" +
                          "         <td  title=\"" + title + "\" style=\"overflow:hidden; width:80px;\"> " + "<div  style =\" overflow :hidden   ; width :70px;\">" + getTitleStr(title ) + "</div>" +
                          "         </td>" +
                          "         <td ><img  src =\"img/closes.png\"  alt =\"\"  style =\" display :none \" title=\"点击关闭\" onclick =\"removeTab('" + newGuidId + "')\"/>" +
                          "         </td>" +
                          "     </tr>" +
                          "</table>" +
                          "</li>";
            tabObj.innerHTML += newLiHTML;
            
            tabListManage.push(newGuidId);
            if (tabListManage.length > maxDisplayCount) {
                document.getElementById(tabListManage[tabListManage.length - 1 - maxDisplayCount]).style.display = 'none';
                startTabIndex++;
            }
            else {
                displayTabCount++;
            }

            nTabsId(newGuidId);
            
            

        }

        function removeTab(tabId) {
            if (tabId == defaulttabObjId) {
                alert("默认选项页，不能删除");
                return;
            }

            var tabList = tabObj.getElementsByTagName("LI");

            for (var i = 0; i < tabList.length; i++) {
                if (tabList[i].id == tabId) {
                    var removedId = i;
                    tabObj.removeChild(tabList[i]);
                    tabListManage.splice(i, 1);
                    contentListManage.splice(i, 1); //移除聊天室内容

                    if (tabListManage.length > (startTabIndex + maxDisplayCount - 1))//后面有隐藏的
                    {
                        document.getElementById(tabListManage[startTabIndex + maxDisplayCount - 1]).style.display = 'block';
                        nTabsIndex(removedId);
                    }
                    else {
                        if (startTabIndex == 0) {
                            nTabsIndex((removedId < tabListManage.length) ? removedId : (removedId - 1));
                        }
                        else {
                            document.getElementById(tabListManage[startTabIndex - 1]).style.display = 'block';
                            startTabIndex--;
                            nTabsIndex(removedId - 1);
                        }
                    }
                    displayTabCount = Math.min(maxDisplayCount, tabListManage.length);
                    return;
                }
            }
        }

        function showAllTabPage() {
            var showallUl = document.getElementById('showAllUl'); //showallUl.style.top = (showallUl.style.top - 10).toString() + "px";
            var ulHtml = "";
            for (var i = 0; i < tabListManage.length; i++) {
                ulHtml += "<li style=\"padding-bottom:5px;\" id=\"show" + tabListManage[i] + "\"  onclick=\"nTabsId('" + tabListManage[i] + "');document.getElementById('showAllUl').style.display='none';\">" + document.getElementById(tabListManage[i]).innerText + "</li>";
            }
            showallUl.innerHTML = ulHtml;
            showallUl.style.display = "block";
        }

        //聊天窗口
        //初始化聊天窗口
        var chatTimeId;
        var userStatusTimeId;
        var onlineUsers;
        function initChatForm(userid) {
            onlineUsers = chatblog.usercate.chatroom.getOnlineUsers(true ).value;
            chatheaderdiv.innerHTML = userid;
            var result = chatblog.usercate.chatroom.GetPersonalChatInfoHtml(tabListManage[currentTabIndex]);
            var htmlStr = (result.value != "" && result.value != null) ? result.value : "";
            contentListManage[currentTabIndex] = (contentListManage[currentTabIndex] == null) ? "" : contentListManage[currentTabIndex];
            //if (result.value != "" && result .value!=null) {
                var chatcontentObj = document.getElementById("chatContentInfo");
                chatcontentObj.innerHTML =_MsgDivHeader +contentListManage[currentTabIndex]+ htmlStr+_MsgDivFooter ;
                contentListManage[currentTabIndex] += htmlStr;
                if(htmlStr !="") {
                    $("chatContentBottom").innerHTML = "最后一条消息收于：" + getCurrentDate();
                    chatcontentObj .innerHTML += _MsgEndHTML ;
                    document.getElementById('2ffa7bd7259343babdfae91f9d2250').scrollIntoView();;
                }
                //document.getElementById('2ffa7bd7259343babdfae91f9d2250').click();
            //} 
            //if(result .value!="")
            //document.getElementById('2ffa7bd7259343babdfae91f9d2250').click();
        }

        function startToChat() {
            userStatusTimeId = setInterval(changeUserStatus, 1000);           //改变好友状态
            chatTimeId = setInterval(getChatLastestInfo, 1000);
        }
        startToChat();
        function endToChat() {
            clearInterval(chatTimeId);
            clearInterval(userStatusTimeId);
        }
        //在这个方法里判断是跳动头像还是获取新信息
        function getChatLastestInfo() {                
            
            var newMsgUsers=chatblog.usercate.chatroom.getNewMsgUsers().value;  //获取最新信息用户列表，用来记录用户头像闪动
            if (newMsgUsers!=null && newMsgUsers.length!=null && newMsgUsers.length > 0) {
                for (var i = 0; i < newMsgUsers.length; i++) {
                    if( (tabListManage[currentTabIndex] != newMsgUsers[i]) && (!exsitUserFlicker(newMsgUsers[i]))) {
                        flickerUserId(newMsgUsers[i]);  //好友闪动的时候闪动好友分组
                    }
                }
            }
                     
            
            var result = chatblog.usercate.chatroom.GetPersonalChatInfoHtml(tabListManage[currentTabIndex]);
            if (result.value != "" && result.value != null) {
                $("chatContentBottom").innerHTML = "最后一条消息收于：" + getCurrentDate();
                var chatcontentObj = document.getElementById("chatContentInfo");
                chatcontentObj.innerHTML =_MsgDivHeader + contentListManage[currentTabIndex] + result.value+_MsgDivFooter +_MsgEndHTML ;
                contentListManage[currentTabIndex] = contentListManage[currentTabIndex] + result.value;
                document.getElementById('2ffa7bd7259343babdfae91f9d2250').scrollIntoView(); ;     //设置 滚动到最底下
                
            } 
        }
        //分析通过Ajax从数据库中获取的所有好友的状态 （userid =status）
        function resolveAllUserStatus(allUserStatusStr) {
            var userStatusArray = new Array();
            var statusStringArray = allUserStatusStr.split(";");
            if (statusStringArray.length != null) {
                for (var i = 0; i < statusStringArray.length; i++) {
                    var childArray = statusStringArray[i].split("=");
                    if (childArray.length != null && childArray .length ==2) {
                        userStatusArray.push([childArray[0], childArray[1]]);
                    }
                }
            }
            return userStatusArray;
        }
        
        //移动好友的位置
        //indexfrom 初始位置
        //isup 向上移动或者向下移动，如果好友上线 isup =true;如果下线 isup =false
        //allusers 所有好友列表 =getAllUsers(); 
        function removeUserPosition(indexfrom, isup,allusers) {
            if (indexfrom >= 0 && indexfrom < allusers.length ) {
                var imgObj = allusers[indexfrom][2];        //好友的头像
                var spanObj = imgObj.parentNode;  // 好友的 span
                var parentObj = spanObj.parentNode;      //好友分组的组内Div
                var brObj = spanObj.nextSibling;    // 好友的 br
                var cloneSpan = spanObj;
                if (parentObj.getElementsByTagName('span').length > 1) {
                    parentObj.removeChild(spanObj);
                    parentObj.removeChild(brObj);
                    //上线
                    if (isup == true) {
                        if (parentObj.childNodes[0] != null) {             //插入到所有的好友上面
                            parentObj.insertBefore(brObj, parentObj.childNodes[0]);
                            parentObj.insertBefore(spanObj, parentObj.childNodes[0]);
                        }
                    }
                    //下线
                    else {
                        var lastUnLineIndex = 0;
                        var imgList = parentObj.getElementsByTagName('img');
                        var found = false;
                        for (var i = 0; i < imgList.length; i++) {
                            if (imgList[i].src.indexOf("img/notuser.ico")>0) {
                                found = true;
                                break;
                            }
                        }
                        if (found == true) {                          //此分组有未注册好友，移动到未注册好友的前面
                            parentObj.insertBefore(brObj, parentObj.childNodes[2*i]);
                            parentObj.insertBefore(spanObj, parentObj.childNodes[2*i]);
                        }
                        else {                                        //此分组没有未注册好友，移动到最后
                            parentObj.appendChild(spanObj);
                            parentObj.appendChild(brObj);
                        } 
                    }
                } 
            }   
        }
        var sysInfoTimeCount = 0;
        //改变好友状态
        function changeUserStatus() {
            
            //return;
            var changeAllStatus = false;
            var allUsers = getAllUsers();
            var oldOnlineUsers = onlineUsers;
            var imgObj;
            var systemInfoString = "";
            var newAllUsers = chatblog.usercate.chatroom.getAllUserStatus().value;
            if (newAllUsers != null && newAllUsers != "") {
                var allUserStatusArray = resolveAllUserStatus(newAllUsers);
                if (allUserStatusArray.length != null && allUserStatusArray.length > 0) {
                    for (var i = 0; i < allUserStatusArray.length; i++) {
                        var found = false;
                        for (var j = 0; j < allUsers.length; j++) {
                            if (allUsers[j][0] == allUserStatusArray[i][0]) {
                                found = true;
                                break;
                            }
                        }
                        if (found==true ) {
                            var imgObj = allUsers[j][2];  //getImgFromUserId(allUserStatusArray[i][0]);
                            //现在不在线
                            if (allUserStatusArray[i][1] == "0") {   
                                imgObj.alt = "不在线";
                                imgObj.title = "该用户不在线";
                                if (allUsers[j][1] == 0 || allUsers[j][1] == 1) {
                                    imgObj.src = getNoColorImg(imgObj.src);            //"img/regular_smile_nocolor.gif";
                                    if (allUsers[j][1] == 1) {
                                        systemInfoString += "<span>好友：" + allUsers[j][0] + "下线了！</span><br/>";
                                        removeUserPosition(j, false, allUsers);   //移动好友到下线的位置
                                    } 
                                }
                                else {
                                    imgObj.src = "img/regular_smile_nocolor.gif";
                                    systemInfoString += "<span>好友：" + allUsers[j][0] + "注册了！</span><br/>";
                                    removeUserPosition(j, false, allUsers);  //移动好友到下线的位置
                                }
                            }
                            //现在在线
                            else if (allUserStatusArray[i][1] == "1") {
                                imgObj.alt = "在线";
                                imgObj.title = "该用户在线";
                                if (allUsers[j][1] == 0 || allUsers[j][1] == 1) {
                                    imgObj.src = getColorImg(imgObj.src);
                                    if (allUsers[j][1] == 0) {
                                        systemInfoString += "<span>好友：" + allUsers[j][0] + "上线了！</span><br/>";
                                        removeUserPosition(j, true, allUsers);    //移动好友到上线的位置
                                    }
                                }
                                else {
                                    imgObj.src = "img/regular_smile.gif";
                                    systemInfoString += "<span>好友：" + allUsers[j][0] + "注册了并在线上！</span><br/>";
                                    removeUserPosition(j, true, allUsers);      //移动好友到上线的位置
                                }
                            }
                            //现在未注册
                            else {
                                imgObj.alt = "未注册";
                                imgObj.src = "img/notuser.ico";
                                imgObj.title = "暂时还未注册成系统用户";
                            }
                        }
                    }
                }
            }
            changeAllStatus = (systemInfoString != ""); 
            if (systemInfoString != "") {
                var id = GetGuid();
                createSysInfoHtmtl(id, systemInfoString); 
                //alert($('SystemInfo_UserStatus_popup' + id));          
                var popObj = $('SystemInfo_UserStatus_popup'+id);
                var left = document.body.scrollWidth - parseInt(popObj.style.width) - 5 + "px";
                var top = document.body.scrollHeight - 10 + "px";   //document.body.scrollHeight - parseInt($('SystemInfo_UserStatus_popup').style.height) - 5 + "px";
                var minTop = document.body.scrollHeight - parseInt(popObj.style.height) - 5;
                var maxTop = document.body.scrollHeight;
                var up_to = true;  //向上
                popup_show('SystemInfo_UserStatus_popup' + id, 'SystemInfo_UserStatus_drag' + id, 'SystemInfo_UserStatus_exit' + id, top, left, false , null, null, true  );

                var sysInfoTimeId = setInterval(function() {
                    if (up_to == true) {
                        popObj.style.top = parseInt(popObj.style.top) - 10 + "px";
                        if (parseInt(popObj.style.top) <= minTop)
                            up_to = false;
                    }
                    else {
                        clearInterval(sysInfoTimeId);
                        setTimeout(function() {
                            var infoTimeObj = setInterval(function() {
                                popObj.style.top = parseInt(popObj.style.top) + 10 + "px";
                                if (parseInt(popObj.style.top) >= maxTop) {
                                    popObj.style.display = 'none';
                                    document.body.removeChild($(id));
                                    clearInterval(infoTimeObj);
                                }
                            }, 100);
                        }, 2000);
                    }
                }, 100);

            }

//            if (contextMenuIsRunOrDisplay()==false) {
//                var doorPDiv = document.getElementById(doorPId);
//                doorPDiv.innerHTML = chatblog.usercate.chatroom.GetDoorPInnerHtml().value;
//                InitAgain();
//            } 
        }
        var sysInfoListManage = new Array();
        function createSysInfoHtmtl(id, sysinfoHtml) {
            var htmlStr = '<div class="sample_popup" id="SystemInfo_UserStatus_popup' + id + '" style="display :none;   height:150px; width :250px;   z-index :'+(9+sysInfoListManage .length).toString() +'";>';
            htmlStr += '<div class="menu_form_header" id="SystemInfo_UserStatus_drag' + id + '">';
            htmlStr += '<table>';
            htmlStr += '<tr><td>';
            htmlStr += '系统消息：';
            htmlStr += '</td><td>';
            htmlStr += '<img alt="" class="menu_form_exit" id="SystemInfo_UserStatus_exit' + id + '" src="img/closes.png" />';
            htmlStr += '</td></tr></table>';
            htmlStr += '</div>';
            htmlStr += '<div class="menu_form_body" id="SystemInfo_UserStatus_body' + id + '">';
            htmlStr += sysinfoHtml;
            htmlStr += '</div></div>';
            var newdiv = document.createElement("div");
            newdiv.id = id;
            newdiv.innerHTML = htmlStr;
            document.body.appendChild(newdiv);
            sysInfoListManage.push(id);
            return id;
        }
        
        function getNoColorImg(imgSrc) { 
            var newSrc = "";
            var suffixName = ".gif";
            var nocolorSuffix = "_nocolor";
            if (imgSrc.length <= (suffixName.length + nocolorSuffix.length))
                return imgSrc.substr(0, imgSrc.length - suffixName.length) + nocolorSuffix + suffixName;
            else {
                if (imgSrc.substr(imgSrc.length - suffixName.length - nocolorSuffix.length , suffixName.length + nocolorSuffix.length) == (nocolorSuffix + suffixName))
                    return imgSrc;
                else
                    return imgSrc.substr(0, imgSrc.length - suffixName.length) + nocolorSuffix + suffixName;
            }
        }
        function getColorImg(imgSrc) {
            var newSrc = "";
            var suffixName = ".gif";
            var nocolorSuffix = "_nocolor";
            if (imgSrc.length <= (suffixName.length + nocolorSuffix.length))
                return imgSrc;
            else {
                if (imgSrc.substr(imgSrc.length - suffixName.length - nocolorSuffix.length , suffixName.length + nocolorSuffix.length) == (nocolorSuffix + suffixName))
                    return imgSrc.substr(0, imgSrc.length - suffixName.length - nocolorSuffix.length) + suffixName;
                else
                    return imgSrc;
            }
        }
        function getImgSrc(imgSrc, toNoColor) {
            var newSrc = "";
            var suffixName = ".gif";
            var nocolorSuffix = "_nocolor";
            if (toNoColor) {
                newSrc = imgSrc.substr(0, imgSrc.length - suffixName.length) + nocolorSuffix + suffixName;
            }
            else {
                newSrc = imgSrc.substr(0, imgSrc.length - suffixName.length - nocolorSuffix.length) + suffixName;
            }
            return newSrc;
        }
        
        //显示右下角信息窗口提示
        function showInfoWindow() { 
        }

        //根据 用户名获取用户头像Img元素
        function getImgFromUserId(userid) {
            Ds = $tag(doorPId, "div");
            for (var i = 0; i < Ds.length; i++) {
                var spanList = Ds[i].getElementsByTagName("span");
                var imgList = Ds[i].getElementsByTagName("img");
                if (spanList.length == null || spanList.length == 0)
                    continue;
                for (var j = 0; j < spanList.length; j++) {
                    var hideInput = spanList[j].getElementsByTagName("input")[0];
                    if ((hideInput != null) && (hideInput.value == userid)) {
                        var imgObj = imgList[j];
                        return imgObj;
                    }
                }
            }
            return null;
        }
        //获取所有好友列表
        function getAllUsers() {
            var allUsers = new Array();
            Ds = $tag(doorPId, "div");
            for (var i = 0; i < Ds.length; i++) {
                var spanList = Ds[i].getElementsByTagName('span');
                var imgList = Ds[i].getElementsByTagName('img');
                if (spanList.length == null || spanList.length == 0)
                    continue;                   
                for (var j = 0; j < spanList.length; j++) {
                    var hideInput = spanList[j].getElementsByTagName("input")[0];
                    if (hideInput != null && hideInput.value != null && hideInput.value != "") {
                        var imgObj = imgList [j]
                        var status = 0;
                        if (imgObj.alt == "在线")
                            status = 1;  //在线
                        else if (imgObj.alt == "不在线")
                            status = 0;  //不在线
                        else if (imgObj.alt = "未知")
                            status = 2;  //未知用户
                        else
                            status = 3; //未注册
                        allUsers.push([hideInput.value, status,imgObj ]);
                    } 
                } 
            }
            return allUsers;
        }
        
        // 隐藏和显示 右边信息栏
        var displayRightTd = true;
        function showChatRightBody(thisobj) { 
            thisobj = thisobj || window.event; 
            var leftBody = document.getElementById("chatBodyLeftTd");
            var rightBody = document.getElementById('chatBodyRightTd');
            rightBody.className = displayRightTd ? "rightTdHidden" : "rightTd";
            leftBody.className = displayRightTd ? "leftTdWholeShow" : "leftTd";
            thisobj.src = displayRightTd ? "img/arrow_left.gif" : "img/arrow_right.gif";
            thisobj.title = displayRightTd ? "点击显示" : "点击隐藏";             
            $('chatContent').style.width =displayRightTd ? "620px":"460px";
            $('chatInput').style.width = displayRightTd ? "620px" : "460px";
            displayRightTd = !displayRightTd;        
            
        }


        //获取当前聊天记录
        function getContentInfoHtml() {
            var totalMsg = document.getElementById('chatContentInfo').innerHTML;
            //totalMsg .sub (
        }
        
        //发送消息
        function sendMessage() {            
            if (currentUser == null || currentUser == "") {
                alert("对不起，您还未登录，请先登录！");
                return;
            }
            var message = getEditHtml();
            var user_to = tabListManage[currentTabIndex]; 
            //公共聊天窗口
            if (user_to == defaulttabObjId) {
                alert('公共聊天窗口暂时不可用！');
            }
            else {
                if (message == "") {
                    alert("对不起，不能发送空消息！");
                    return;
                }
                chatblog.usercate.chatroom.InsertNewMessage(user_to, message, 0);
                frameobj.document.body.innerHTML = "";  //(isIE()) ? "<div></div>" : "";  //在keydown 中设置了回车键 插入 /n
                //alert(frameobj.document.body.innerHTML);
            }

            frameobj.focus();    
        }
        
        function insertHTML() {
            alert(frameobj.document.body.innerHTML);
        }

        // 获取编辑框中的HTML，如果都是空格和回车就返回"";
        function getEditHtml() {
            var textStr = "";
            if (Sys.firefox) {
                textStr = getIFrameBodyInnerText();
            }
            else {
                textStr = frameobj.document.body.innerText;
            } 
            var hmtlStr = frameobj.document.body.innerHTML;
            if (textStr.replace(/\s/g, "") == "") {
                var searchResult = frameobj.document.body.getElementsByTagName('img');
                if (searchResult == null || searchResult.length == null || searchResult.length == 0) {
                    return "";
                }
            }
            return hmtlStr;
           
        }
        window.onbeforeunload = function(evt) {
            evt = evt || window.event;
            var event = evt;
            endToChat();
            var result = chatblog.usercate.chatroom.LoginOut().value;
        }
        

        function getCurrentDate() {
            var currentdate = new Date();
            return currentdate.getFullYear().toString() + "-" + currentdate.getMonth().toString() + "-" + currentdate.getDay().toString() + "  "
                  + currentdate.getHours().toString() + ":" + currentdate.getMinutes().toString() + ":" + currentdate.getSeconds().toString();
        }
        // var agt = navigator.userAgent.toLowerCase();
        // var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));

        
        
        
        //setInterval(getFrameSelection, 1000);
        // 辅助方法
        function GetGuid() {
            return chatblog.usercate.chatroom.GetNewGuid().value;
        }       


        function isIE() { //ie? 
            if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 1)
                return true;
            else
                return false;
        }

        function getIFrameBodyInnerText() {
            var anyString ="";
            var bchildNodes = frameobj.document.body.childNodes;
            for (var i = 0; i < bchildNodes.length; i++)
                anyString += getElementInnerTextInFFFrame(bchildNodes[i]);
            return anyString; 
        }
        function getElementInnerTextInFFFrame(node) {
            var anyString = "";
            if (node.nodeType == 3)
                anyString += node.nodeValue;
            else {
                var childS = node.childNodes;
                for (var i = 0; i < childS.length; i++) {
                    if (childS[i].nodeType == 1)
                    //anyString += childS[i].tagName=="BR" ? "\n" : childS[i].innerText;
                        anyString += getElementInnerTextInFFFrame(childS[i]);
                    else if (childS[i].nodeType == 3)
                        anyString += childS[i].nodeValue;
                } 
            }
            return anyString;
        }
        window.onload = sfHover;
        //alert(frameobj.document.getElementsByTagName("body")[0].onkeydown);
</script>
</asp:Content>
